<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>红包列表</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
	<div class="page-group">
		<div class="page">
			<header class="bar bar-nav">
				<a class="button button-link button-nav pull-left close-popup"
					href="/redpacket" data-transition='slide-out'> <span
					class="icon icon-left"></span> 返回
				</a>
				<h1 class="title" id="name_head"></h1>
			</header>
			<!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
			<div class="content infinite-scroll infinite-scroll-bottom"
				data-distance="100">
				<div class="list-block" id="contentDiv"></div>
				<!-- 加载提示符 -->
				<div class="infinite-scroll-preloader">
					<div class="preloader"></div>
				</div>
			</div>
		</div>
	</div>

	<script type='text/javascript'
		src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

	<script type="text/javascript" src="/redpacket/js/common.js"></script>

	<script type="text/javascript">
		//加载flag
		var loading = false;

		// 每次加载添加多少条目
		var itemsPerLoad = 20;

		// 是否为最后一页
		var lastPage = false;

		// 当前页
		var pageNumber = 1;

		$(function() {

			// 预先加载20条
			addItems(pageNumber++);

			// 注册'infinite'事件处理函数
			$(document).on('infinite', '.infinite-scroll-bottom', function() {

				// 如果正在加载，则退出
				if (loading)
					return;

				// 设置flag
				loading = true;

				// 模拟1s的加载过程
				setTimeout(function() {
					// 重置加载flag
					loading = false;

					if (lastPage) {
						// 加载完毕，则注销无限加载事件，以防不必要的加载
						$.detachInfiniteScroll($('.infinite-scroll'));
						// 删除加载提示符
						$('.infinite-scroll-preloader').remove();
						return;
					}

					// 添加新条目
					addItems(pageNumber++);
					// 更新最后加载的序号
					lastIndex = $('.list-container li').length;
					// 容器发生改变,如果是js滚动，需要刷新滚动
					$.refreshScroller();
				}, 1000);
			});

			$.init();

			if (lastPage) {
				// 加载完毕，则注销无限加载事件，以防不必要的加载
				$.detachInfiniteScroll($('.infinite-scroll'));
				// 删除加载提示符
				$('.infinite-scroll-preloader').remove();
				return;
			}
		});

		// 从数据库中查找信号在页面显示
		function addItems(pageNumber) {
			var p_data = {
				pageNumber : pageNumber,
				pageSize : itemsPerLoad,
				peopleId : ${peopleId!}
			};

			page_post_ajax_no_async('/redpacket/paginateByPeopleIdToJson', p_data,
					'addItemsCallback', '');

		}

		function addItemsCallback(data) {
			console.log(data);
			lastPage = data.lastPage;
			var signalList = data.list;
			
			$('#name_head').text(signalList[0].name);
			
			for (var i = 0; i < signalList.length; i++) {
				
				var typeName;
				
				if(signalList[i].type == '0') {
					typeName = '结婚';
				} else {
					typeName = '其他';
				}
				
				var car = $('<div class="card"></div>');
				var card_header = $('<div class="card-header">' + typeName + '</div>');

				var card_content = $('<div class="card-content"></div>');
				var card_content_inner = $('<div class="card-content-inner">' + signalList[i].money + '</div>');
				card_content.append(card_content_inner);

				var car_footer = $('<div class="card-footer">' + signalList[i].createTime + '</div>');
				
				car.append(card_header);
				car.append(card_content);
				car.append(car_footer);

				$('#contentDiv').append(car);
			}
		}
	</script>

</body>
</html>